<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" th:replace="~{common/base :: layout(~{::title}, ~{::content}, ~{::style}, ~{::script})}">
<head>
    <title>商品管理 - 优选商城</title>
    <style th:fragment="style">
        .product-image {
            width: 80px;
            height: 80px;
            object-fit: cover;
            border-radius: 4px;
        }
        .content-wrapper {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
    </style>
</head>
<body>
    <div th:fragment="content">
        <div class="content-wrapper">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h2>商品管理</h2>
                <a href="/admin/products/add" class="btn btn-primary">
                    <i class="bi bi-plus-lg"></i> 添加商品
                </a>
            </div>

            <!-- 搜索栏 -->
            <div class="card mb-4">
                <div class="card-body">
                    <form class="row g-3" method="get" action="/admin/products">
                        <div class="col-md-4">
                            <input type="text" class="form-control" name="keyword" th:value="${keyword}" placeholder="输入商品名称搜索">
                        </div>
                        <div class="col-md-2">
                            <button type="submit" class="btn btn-primary w-100">搜索</button>
                        </div>
                        <div class="col-md-2">
                            <a href="/admin/products" class="btn btn-outline-secondary w-100">重置</a>
                        </div>
                    </form>
                </div>
            </div>

            <!-- 商品列表 -->
            <div class="card">
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>图片</th>
                                    <th>商品名称</th>
                                    <th>价格</th>
                                    <th>库存</th>
                                    <th>销量</th>
                                    <th>状态</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr th:each="product : ${page.records}">
                                    <td th:text="${product.id}"></td>
                                    <td>
                                        <img th:src="${product.mainImage}" class="product-image" alt="商品图片">
                                    </td>
                                    <td th:text="${product.name}"></td>
                                    <td th:text="${product.price}"></td>
                                    <td th:text="${product.stock}"></td>
                                    <td th:text="${product.sales}"></td>
                                    <td>
                                        <span th:if="${product.status == 1}" class="badge bg-success">上架</span>
                                        <span th:if="${product.status == 0}" class="badge bg-secondary">下架</span>
                                    </td>
                                    <td>
                                        <div class="btn-group">
                                            <a th:href="@{/admin/products/edit/{id}(id=${product.id})}" class="btn btn-sm btn-outline-primary">
                                                <i class="bi bi-pencil"></i> 编辑
                                            </a>
                                            <button type="button" class="btn btn-sm btn-outline-danger" 
                                                    th:onclick="'deleteProduct(' + ${product.id} + ')'">
                                                <i class="bi bi-trash"></i> 删除
                                            </button>
                                            <button type="button" class="btn btn-sm" 
                                                    th:classappend="${product.status == 1 ? 'btn-outline-warning' : 'btn-outline-success'}"
                                                    th:onclick="'updateStatus(' + ${product.id} + ', ' + (${product.status == 1 ? 0 : 1}) + ')'">
                                                <i class="bi" th:classappend="${product.status == 1 ? 'bi-arrow-down' : 'bi-arrow-up'}"></i>
                                                <span th:text="${product.status == 1 ? '下架' : '上架'}"></span>
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                    <!-- 分页 -->
                    <nav th:if="${page.total > 0}">
                        <ul class="pagination justify-content-center">
                            <li class="page-item" th:classappend="${page.current == 1 ? 'disabled' : ''}">
                                <a class="page-link" th:href="@{/admin/products(pageNum=${page.current - 1}, pageSize=${page.size}, keyword=${keyword})}">上一页</a>
                            </li>
                            <li class="page-item" th:each="i : ${#numbers.sequence(1, page.pages)}"
                                th:classappend="${i == page.current ? 'active' : ''}">
                                <a class="page-link" th:href="@{/admin/products(pageNum=${i}, pageSize=${page.size}, keyword=${keyword})}" th:text="${i}"></a>
                            </li>
                            <li class="page-item" th:classappend="${page.current == page.pages ? 'disabled' : ''}">
                                <a class="page-link" th:href="@{/admin/products(pageNum=${page.current + 1}, pageSize=${page.size}, keyword=${keyword})}">下一页</a>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
    </div>

    <script th:fragment="script">
        // 删除商品
        function deleteProduct(id) {
            showConfirmModal({
                title: '确认删除',
                message: '确定要删除这个商品吗？此操作不可恢复。',
                confirmText: '确定删除',
                onConfirm: function() {
                    $.post('/admin/products/delete/' + id, function(res) {
                        if (res.code === 0) {
                            showSuccess('删除成功');
                            setTimeout(function() {
                                window.location.reload();
                            }, 1500);
                        } else {
                            showError(res.msg || '删除失败');
                        }
                    });
                }
            });
        }

        // 更新商品状态
        function updateStatus(id, status) {
            $.post('/admin/products/status/' + id, {status: status}, function(res) {
                if (res.code === 0) {
                    showSuccess('更新成功');
                    setTimeout(function() {
                        window.location.reload();
                    }, 1500);
                } else {
                    showError(res.msg || '更新失败');
                }
            });
        }
    </script>

    <!-- 删除确认模态框 -->
    <div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="deleteModalLabel">确认删除</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    确定要删除这个商品吗？此操作不可恢复。
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-danger" id="confirmDelete">确定删除</button>
                </div>
            </div>
        </div>
    </div>
</body>
</html> 